// 首页图表
showItem1Init();
$(function(){



    /**
     * 重大项目进度情况开工率  open-rate
     */
    function openRate(opt){
        var myChart = echarts.init(document.getElementById('open-rate'));
        var option = {
            graphic:{
                type:'text',
                left:'center',
                top:'50%',
                style:{
                    text:'开工率',
                    textAlign:'center',
                    fill:'#fff',
                    width:82,
                    height:68,
                    fontSize:10
                }
            },
            series: [
                {
                    animationDuration: 3000,
                    name:'重大项目',
                    type:'pie',
                    radius: ['40%', '65%'],
                    center:['50%',"50%"], //移动圆位置
                    label: {
                        formatter: '{b}{c}项',
                        fontSize: 15,
                        color:"#fff",

                    },
                    labelLine: {
                        show: true,
                        length:5
                    },
                    data:[
                        {
                            value: opt.data.notStartWorkNum,
                            name:"未开工"
                        },
                        {
                            value: opt.data.startWorkNum,
                            name:"开工"
                        },
                    ],
                    color: [
                        {
                            type: "linear",
                            colorStops: [{
                                offset: 0,
                                color: '#9B4BD9'
                            },
                                {
                                    offset: 1,
                                    color: '#339CF1'
                                }
                            ]
                        },
                        {
                            type: 'linear',
                            colorStops: [{
                                offset: 0,
                                color: '#ECFB21'
                            },
                                {
                                    offset: 1,
                                    color: '#388E03'
                                }
                            ]
                        }
                    ],
                }
            ],
        };
        $('.rate').text(opt.data.startWorkRate);
        var _ec = echarts.init(document.getElementById("open-rate"));
        _ec.setOption(option);
        window.addEventListener("resize", function() {
            _ec.resize();
        });

    }

    $.ajax({
        url:'/app/newProject/openRate',
        type:'GET',
        dataType: "json",
        success:function(result){
            openRate(result);
        }
    })

    /**
     * 计划开工项目
     */
    function planeOpen(opt){
        var myChart = echarts.init(document.getElementById('plane'));
        var option = {
            series: [
                {
                    animationDuration: 3000,
                    name:'计划新开工项目',
                    type:'pie',
                    radius: ['35%', '55%'],
                    center:['50%',"35%"], //移动圆位置
                    label: {
                        formatter: '{b}:{c}项',
                        fontSize: 15,
                        color:"#fff",

                    },
                    labelLine: {
                        show: true,
                        length:0.0001
                    },
                    data:[
                        {
                            value: opt.data.notStartWorkNum,
                            name:"未开工"
                        },
                        {
                            value:  opt.data.startWorkNum,
                            name:"开工"
                        },
                    ],
                    color: [
                        {
                            type: "linear",
                            colorStops: [{
                                offset: 0,
                                color: '#A33AB3'
                            },
                                {
                                    offset: 1,
                                    color: '#F06F82'
                                }
                            ]
                        },
                        {
                            type: 'linear',
                            colorStops: [{
                                offset: 0,
                                color: '#EAFF1D'
                            },
                                {
                                    offset: 1,
                                    color: '#91CB59'
                                }
                            ]
                        },

                    ],
                }
            ],
        };
        $(".new-plane-rate").text(opt.data.startWorkRate);
        var _ec = echarts.init(document.getElementById("plane"));
        _ec.setOption(option);
        //点击事件
        _ec.on('click', function (params) {
                if(params.name=="未开工"){
                    window.location.href="/newlogin/goIndex2?projectType=2001&status=0";
                }else{
                    window.location.href="/newlogin/goIndex2?projectType=2001&status=4";
                }
        })
        window.addEventListener("resize", function() {
            _ec.resize();
        });
    }


    $.ajax({
        url:'/app/newProject/planeOpenProject',
        type:'GET',
        dataType: "json",
        success:function(result){
            planeOpen(result);
        }
    })

    /**
     * 结转项目
     */
    function jzProject(opt){
        var myChart = echarts.init(document.getElementById('jz-project'));
        var option = {
            series: [
                {
                    animationDuration: 3000,
                    name:'计划新开工项目',
                    type:'pie',
                    radius: ['35%', '55%'],
                    center:['50%',"35%"], //移动圆位置
                    label: {
                        formatter: '{b}:{c}项',
                        fontSize: 15,
                        color:"#fff",

                    },
                    labelLine: {
                        show: true,
                        length:0.0001
                    },
                    data:[
                        {
                            value: opt.data.notStartWorkNum,
                            name:"未开工"
                        },
                        {
                            value: opt.data.startWorkNum,
                            name:"开工"
                        },
                    ],
                    color: [
                        {
                            type: "linear",
                            colorStops: [{
                                offset: 0,
                                color: '#A33AB3'
                            },
                                {
                                    offset: 1,
                                    color: '#F06F82'
                                }
                            ]
                        },
                        {
                            type: 'linear',
                            colorStops: [{
                                offset: 0,
                                color: '#EAFF1D'
                            },
                                {
                                    offset: 1,
                                    color: '#91CB59'
                                }
                            ]
                        },

                    ],
                }
            ],
        };
        $(".jzproject-rate").text(opt.data.startWorkRate);
        // 使用刚指定的配置项和数据显示图表。
        var _ec = echarts.init(document.getElementById("jz-project"));
        _ec.setOption(option);
        //点击事件
        _ec.on('click', function (params) {
            if(params.name=="未开工"){
                window.location.href="/newlogin/goIndex2?projectType=2002&status=0";
            }else{
                window.location.href="/newlogin/goIndex2?projectType=2002&status=4";
            }
        })
        //自适应大小
        window.onresize = myChart.resize;
    }

    $.ajax({
        url:'/app/newProject/jzProject',
        type:'GET',
        dataType: "json",
        success:function(result){
            jzProject(result);
        }
    })


    /**
     * 各单位节点完成率
     */
    function nodeRate(result){
        var dataArr1 = []; //部门
        var dataArr2=[];   //数据值
        for(var key in result.data){
            dataArr1.push(key);
            dataArr2.push(result.data[key].toFixed(0));
        }
       var  option = {
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c}%"
            },
            xAxis: {
                type: 'category',
                data: dataArr1,
                axisLabel:{
                    interval: 0    //x轴数值全部显示出来
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize:10    //设置x轴字体
                    },
                    interval:0,
                    rotate:-30
                },
                axisLine:{
                    lineStyle:{
                        color:'#2030FF',
                        width:3,//这里是为了突出显示加上的
                    }
                },
                axisTick:{
                    show:false   //去掉刻度线
                }
            },
            yAxis: {
                name:"完成率",
                nameTextStyle:{
                    color:"#4EDDEB",  //设置y轴文字颜色样式
                },
                type:'value',
                type: 'value',
                // 去除y轴上的刻度值
                axisLabel: {
                    show: false,
                },
                //去掉网格线
                splitLine:{
                    show:false
                },
                //去掉刻度线
                axisTick: {
                    show: false
                },
                axisLine:{
                    lineStyle:{
                        color:'#2030FF',
                        width:3,//这里是为了突出显示加上的
                    }
                }
            },
            series: [{
                animationDuration: 3000,
                data: dataArr2,
                type: 'bar',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'inside',//数据在中间显示
                            formatter:'{c}%'//百分比显示
                        },
                        barBorderRadius:[5,5,0,0]
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#9BD2FF'
                        }
                    }
                },
                barWidth : 20,//柱图宽度
            }],
            color:[
                {
                    type: 'linear',
                    x:0,
                    y:2,
                    x2:2,
                    y2:0,
                    colorStops: [
                        {offset: 0,color: '#4C3A7C'},
                        {offset: 0.5,color: '#5F96C3'},
                        {offset:1,color:"#D9727C"}
                    ],
                    globalCoord: false
                },
            ]
        };
        var _ec = echarts.init(document.getElementById("node-rate"));
        _ec.setOption(option);
        window.addEventListener("resize", function() {
            _ec.resize();
        });
    }

    $.ajax({
        url:'/app/newProject/getAllDeptCompletionRate',
        type:'GET',
        dataType: "json",
        success:function(result){
            nodeRate(result);
        }
    })


    /**
     * 预警出来信息率
     */
    function warningRate(result){
        var dataArr1 = []; //部门
        var dataArr2=[];   //数据值
        for(var key in result.data){
            dataArr1.push(key);
            dataArr2.push(result.data[key].toFixed(0));
        }
      var  option = {
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c}%"
            },
            xAxis: {
                type: 'category',
                data: dataArr1,
                axisLabel:{
                    interval: 0    //x轴数值全部显示出来
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize:10    //设置x轴字体
                    },
                    interval:0,
                    rotate:-30
                },
                axisLine:{
                    lineStyle:{
                        color:'#2030FF',
                        width:3,//这里是为了突出显示加上的
                    }
                },
                axisTick:{
                    show:false   //去掉刻度线
                }
            },
            yAxis: {
                name:'完成率',
                nameTextStyle:{
                    color:"#4EDDEB",  //设置y轴文字颜色样式
                },
                type:'value',
                type: 'value',
                // 去除y轴上的刻度值
                axisLabel: {
                    show: false,
                },
                //去掉网格线
                splitLine:{
                    show:false
                },
                //去掉刻度线
                axisTick: {
                    show: false
                },
                axisLine:{
                    lineStyle:{
                        color:'#2030FF',
                        width:3,//这里是为了突出显示加上的
                    }
                }
            },
            series: [{
                animationDuration: 3000,
                data: dataArr2,
                type: 'bar',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'inside',//数据在中间显示
                            formatter:'{c}%'//百分比显示
                        },
                        barBorderRadius:[5,5,0,0]
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#9BD2FF'
                        }
                    }
                },
                barWidth : 20,//柱图宽度
            }],
            color:[
                {
                    type: 'linear',
                    x:0,
                    y:2,
                    x2:2,
                    y2:0,
                    colorStops: [
                        {offset: 0,color: '#4C3A7C'},
                        {offset: 0.5,color: '#5F96C3'},
                        {offset:1,color:"#D9727C"}
                    ],
                    globalCoord: false
                },
            ]
        };
        var _ec = echarts.init(document.getElementById("warning-rate"));
        _ec.setOption(option);
        window.addEventListener("resize", function() {
            _ec.resize();
        });
    }

    $.ajax({
        url:'/app/newProject/getEarlyWarningHandleRate',
        type:'GET',
        dataType: "json",
        success:function(result){
            warningRate(result);
        }
    })
})




/**
 * 行业分类图表
 */
function industryCassification(opt) {
    var myChart = echarts.init(document.getElementById('industry-classification'));
    _this=this;
    var option = {
        legend:{
            orient:'vertical',
            x:'left',
            y:'40%',
            itemWidth:39,
            itemHeight:22,
            data:[
                opt.industry[0].industryType,
                opt.industry[1].industryType,
                opt.industry[2].industryType,
                opt.industry[3].industryType,
                opt.industry[4].industryType,
                opt.industry[5].industryType,
                opt.industry[6].industryType,
                opt.industry[7].industryType,
            ],
            textStyle: {
                color:'#6AFAFF',
                fontSize:'12',
                marginBottom:20
            }
        },
        graphic:{
            type:'text',
            left:"36%",
            top:"22%",
            style:{
                text:opt.count+'项',
                textAlign:'centerr',
                fill:'#fff',
                fontSize:30
            }
        },
        series: [
            {
                animationDuration: 3000,
                name:'重大项目行业分类',
                type:'pie',
                radius: ['38%', '50%'],//内半径，外半径
                center:["50%","23%"], //移动圆位置
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center',
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },

                data:[
                    {
                        value:opt.industry[0].num,
                        name:opt.industry[0].industryType,
                        itemStyle: {
                            color:"#ec5394"
                        }

                    },
                    {
                        value:opt.industry[1].num,
                        name:opt.industry[1].industryType,
                        itemStyle: {
                            color:"#a3d238"
                        }
                    },
                    {
                        value:opt.industry[2].num,
                        name:opt.industry[2].industryType,
                        itemStyle: {
                            color:"#0695cf"
                        }
                    },
                    {
                        value:opt.industry[3].num,
                        name:opt.industry[3].industryType,
                        itemStyle: {
                            color:"#f6b37f"
                        }
                    },
                    {
                        value:opt.industry[4].num,
                        name:opt.industry[4].industryType,
                        itemStyle: {
                            color:"#61d5be"
                        }
                    },
                    {
                        value:opt.industry[5].num,
                        name:opt.industry[5].industryType,
                        itemStyle: {
                            color:"#bb5ed1"
                        }
                    },
                    {
                        value:opt.industry[6].num,
                        name:opt.industry[6].industryType,
                        itemStyle: {
                            color:"#f0ba19"
                        }
                    },
                    {
                        value:opt.industry[7].num,
                        name:opt.industry[7].industryType,
                        itemStyle: {
                            color:"green"
                        }
                    }
                ]
            }
        ]
    };
    var _ec = echarts.init(document.getElementById("industry-classification"));
    _ec.setOption(option);
    window.addEventListener("resize", function() {
        _ec.resize();
    });
}

/**
 * 点击率排名
 */
function clickRate(opt){
    //接入数据
    var dataArr = [];
    for(var i=0;i<opt.data.length;i++){
        var obj={};
        obj.value=i+1;
        obj.name=opt.data[i].key+"      "+opt.data[i].value+"次";
        dataArr.push(obj);
    }

   var  option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br>{b}"
        },
        series: [
            {
                name: '点击率排名',
                type: 'funnel',
                sort: 'ascending',
                x: '0%',
                y:"10%",
                left:"5%",
                width:"50%",
                height:"90%",
                itemStyle: {
                    normal: {
                        label: {
                            position: 'right',
                            color:"#fff",
                            fontWeight:"normal"
                        }
                    }
                },
                markArea:{
                    label:{
                        color:"#fff"
                    }
                },
                data: dataArr,
            }
        ],
        color: [
            '#ffccbc',
            '#ffcc80',
            '#ffd54f',
            '#ffee58',
            '#cddc39',
            '#7cb342',
            '#388e3c',
            '#1de9b6',
            '#18ffff',
            '#80d8ff',
            '#448aff',
            '#3d5afe',
            '#aa00ff'
        ]
    };
    var _ec = echarts.init(document.getElementById("clickrate"));
    _ec.setOption(option);
    window.addEventListener("resize", function() {
        _ec.resize();
    });
}


//点击率请求
$.ajax({
    url: '/app/loginLog/clickCount',
    type: 'GET',
    dataType: "json",
    success: function (result) {
        clickRate(result);
    }
})



$.ajax({
    url:'/echart/IndustryCategory',
    type: "POST",
    dataType: "json", //返回数据形式为json
    contentType: 'application/json;charset=UTF-8',
    success:function(resule){
        industryCassification(resule);
        var industrys=$('.right-side p')
        var industryLength=$('.right-side p').length
        for(var i=0;i<industryLength;i++){
            var values=$('.right-side p em')
            var valsLength=$('.right-side p em').length
            var industrys=$('.right-side p')[i];
            var indeus=$(industrys.children);
            var indeusJq=$(indeus);
            var el=$(indeusJq)
            var elLast=$(indeusJq[0]);
            var elFrist=$(indeusJq[1]);
            $(elFrist).html(resule.industry[i].page)
            $(elLast).html(resule.industry[i].num)
        }
    }
})


function showItem1(text,tab){
    var val= text;//获取它的值
    var id = "#Section"+tab;
    $.ajax({
        type: 'get',
        url: '/chart/queryByType?industryType='+val,//请求数据的地址
        dataType: "json",        //返回数据形式为json
        success: function (result) {
            var html="";
            var htmlData = result.data;
            for (var i = 0; i < htmlData.length; i++){
                var percent = htmlData[i].nodeFinish/htmlData[i].nodeNeed*100;
                var view = "<div class=\"content clear\">\n" +
                    "                    <p class=\"row-1\">\n" +
                    "                    <span class=\"hidden-font project-names \" title="+htmlData[i].item.name+" data-id="+htmlData[i].item.sysId+">"+htmlData[i].item.name+"</span>\n" +
                    "                <span class=\"username\">"+htmlData[i].item.resUser+"</span>\n" +
                    "                    <span class=\"department hidden-font\" title="+htmlData[i].item.resDept+">"+htmlData[i].item.resDept+"</span>\n" +
                    "                    <span><em>"+htmlData[i].nodeFinish+"</em>\/"+htmlData[i].nodeNeed+"</span>\n" +
                    "                <span class=\"img-1\">\n" +
                    "                    <img src=\"/assets/web/img/indexChart/circle.png\" alt=\"图片加载中\">&nbsp;&nbsp;&nbsp;实时动态\n" +
                    "                </span>\n" +
                    "                <span class=\"img-2\" data-id="+htmlData[i].item.sysId+">\n" +
                    "                    <img src=\"/assets/web/img/indexChart/circle.png\" alt=\"图片加载中\">&nbsp;&nbsp;&nbsp;进程报告\n" +
                    "                </span>\n" +
                    "                </p>\n" +
                    "                <p class=\"row-2\">\n" +
                    "                    <div class=\"progress  lf\" data-id="+htmlData[i].item.sysId+">\n" +
                    "                    <div class=\"progress-bar\" style=\"width:"+percent+"%;border-radius: 20px;\"></div>\n" +
                    "                    </div>\n" +
                    "                    <span class=\"project-locate lf hidden-font\">"+ (undefined==htmlData[i].nextSmallNode?"--------": htmlData[i].nextSmallNode.nodeId+htmlData[i].nextSmallNode.nodeName )+" </span>\n" +
                    "                <span class=\"finished lf\">未开始："+(htmlData[i].nodeNoBegin == '0'? '完成':htmlData[i].nodeNoBegin+"个")+"</span>\n" +
                    "                <span class=\"goon lf\">已开始："+htmlData[i].nodeBegin+"个</span>\n" +
                    "                <span class=\"a unfinished lf\">完成："+htmlData[i].nodeFinish+"个</span>\n" +
                    "                </p>\n" +
                    "                </div>";
                html = html + view;
            }
            $(id).html(html);
            // 滚动条api
            // $('.item').perfectScrollbar();
            //    修改滚动条颜色
            $("#ascrail2000>div").css('background','#fff');
            $("#ascrail2001>div").css('background','#fff');
            $("#ascrail2002>div").css('background','#fff');
            $("#ascrail2003>div").css('background','#fff');
            $("#ascrail2004>div").css('background','#fff');
            $("#ascrail2005>div").css('background','#fff');
            $("#ascrail2006>div").css('background','#fff');
            $("#ascrail2007>div").css('background','#fff');
        }
    })
}

function showItem1Init(){
    var val="1002";//获取它的值
    var id = "#Section1";
    $.ajax({
        type: 'get',
        url: '/chart/queryByType?industryType='+val,//请求数据的地址
        dataType: "json",        //返回数据形式为json
        success: function (result) {
            var html="";
            var htmlData = result.data;
            for (var i = 0; i < htmlData.length; i++){
                var percent = htmlData[i].nodeFinish/htmlData[i].nodeNeed*100;
                var view = "<div class=\"content clear\">\n" +
                    "                    <p class=\"row-1\">\n" +
                    "                    <span class=\"hidden-font project-names\" title="+htmlData[i].item.name+" data-id="+htmlData[i].item.sysId+">"+htmlData[i].item.name+"</span>\n" +
                    "                <span class=\"username\">"+htmlData[i].item.resUser+"</span>\n" +
                    "                    <span class=\"department hidden-font\" title="+htmlData[i].item.resDept+">"+htmlData[i].item.resDept+"</span>\n" +
                    "                    <span><em>"+htmlData[i].nodeFinish+"</em>\/"+htmlData[i].nodeNeed+"</span>\n" +
                    "                <span class=\"img-1\">\n" +
                    "                    <img src=\"/assets/web/img/indexChart/circle.png\" alt=\"图片加载中\">&nbsp;&nbsp;&nbsp;实时动态\n" +
                    "                </span>\n" +
                    "                <span class=\"img-2\" data-id="+htmlData[i].item.sysId+">\n" +
                    "                    <img src=\"/assets/web/img/indexChart/circle.png\" alt=\"图片加载中\">&nbsp;&nbsp;&nbsp;进程报告\n" +
                    "                </span>\n" +
                    "                </p>\n" +
                    "                <p class=\"row-2\">\n" +
                    "                    <div class=\"progress  lf\" data-id="+htmlData[i].item.sysId+">\n" +
                    "                    <div class=\"progress-bar\" style=\"width:"+percent+"%;border-radius: 20px;\"></div>\n" +
                    "                    </div>\n" +
                    "                    <span class=\"project-locate lf hidden-font\">"+ (undefined==htmlData[i].nextSmallNode?"--------": htmlData[i].nextSmallNode.nodeId+htmlData[i].nextSmallNode.nodeName )+" </span>\n" +
                    "                <span class=\"finished lf\">未开始："+(htmlData[i].nodeNoBegin == '0'? '完成':htmlData[i].nodeNoBegin+"个")+"</span>\n" +
                    "                <span class=\"goon lf\">已开始："+htmlData[i].nodeBegin+"个</span>\n" +
                    "                <span class=\"a unfinished lf\">完成："+htmlData[i].nodeFinish+"个</span>\n" +
                    "                </p>\n" +
                    "                </div>";
                html = html + view;
            }
            $(id).html(html);
            // 滚动条api
            // $('.item').perfectScrollbar();
            //    修改滚动条颜色
            $("#ascrail2000>div").css('background','#fff');
            $("#ascrail2001>div").css('background','#fff');
            $("#ascrail2002>div").css('background','#fff');
            $("#ascrail2003>div").css('background','#fff');
            $("#ascrail2004>div").css('background','#fff');
            $("#ascrail2005>div").css('background','#fff');
            $("#ascrail2006>div").css('background','#fff');
            $("#ascrail2007>div").css('background','#fff');
        }
    })
}
